<template>
  <div class="full-page-container">
    <div class="content-wrapper">
      <el-form :model="dishesn" class="demo-form-inline">
        <el-form-item label="菜品名称" prop="type" required>
          <el-input v-model="dishesn.name" placeholder="请输入.."></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="type" required>
          <el-input v-model="dishesn.price" placeholder="请输入.."></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="discount" required>
          <el-input v-model="dishesn.image" placeholder="请输入.."></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>

      <div class="table-container">
        <el-table :data="dishes" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="菜品名称" width="180"></el-table-column>
          <el-table-column prop="price" label="价格" width="100"></el-table-column>
          <el-table-column prop="image" label="菜品图片" width="180">
<!--            <template #default="scope">-->
<!--              <el-image-->
<!--                  style="width: 100px; height: 100px"-->
<!--                  :src="scope.row.image"-->
<!--                  :preview-src-list="[scope.row.image]"-->
<!--                  fit="cover"-->
<!--              ></el-image>-->
<!--            </template>-->
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-footer">
        <div class="pagination-info">
          共{{ total }}条数据
        </div>
        <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="10"
            @current-change="handlePageChange">
        </el-pagination>
      </div>

      <div class="action-buttons">
        <el-button @click="goBack">取消</el-button>
        <el-button type="primary" @click="confirmSelection">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage} from "element-plus"
import axios from "axios";

const router = useRouter()
const route = useRoute()

const dishes = ref([])
const total = ref(100)
const selectedDishes = ref([])
const dishesn=ref({})

//条件查询==========================================================================
const search = () => {
  axios.post("/coupons/getSearch", dishesn.value)
      .then(res => {
        dishes.value = res.data.obj;
        ElMessage.success("查询成功！！！！")
      })
}
//条件查询==========================================================================

const handleSelectionChange = (selection) => {
  selectedDishes.value = selection
 }
const handlePageChange = (page) => {
  console.log('Current page:', page)
}
// const confirmSelection = () => {
//   if (selectedDishes.value.length === 0) {
//     ElMessage.warning('请至少选择一个菜品')
//   }
//
//   // const selectedDishData = selectedDishes.value.map(dish => ({
//   //   id: dish.id,
//   //   name: dish.name,
//   //   price: dish.price,
//   //   image: dish.image
//   // }))
// else {
//   //   router.push({
//   //     name: 'AddCouponPage',
//   //     query: {
//   //       selectedDishes: JSON.stringify(selectedDishes.value),
//   //       timestamp: Date.now()
//   //     }
//   //   })
// }
// }
//查询菜品名称，价格，菜品图片================================================================================
const getdishSelect = () => {
  axios.post("/coupons/selection", selectedDishes.value).then(response => {
    dishes.value = response.data
  })
}
//查询菜品名称，价格，菜品图片================================================================================

//返回到上一层============================================================================================
const goBack = () => {
  router.push({name: 'AddCouponPage2'})}
//返回到上一层============================================================================================

onMounted(() => {
  getdishSelect();
})
</script>

<style scoped>
.full-page-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.demo-form-inline {
  margin-bottom: 20px;
}

.table-container {
  flex: 1;
  overflow: auto;
  margin-bottom: 20px;
}

.pagination-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.action-buttons {
  margin-top: 20px;
  text-align: right;
}

.el-table {
  width: 100%;
}

.el-image {
  border-radius: 4px;
  border: 1px solid #ebeef5;
}
</style>